import React, { Component } from 'react';

/*
  不要在 jsx 中使用 for 循环系列 (for/for in/for of...)
  使用 map 遍历的时候一定要给根标签添加一个 key 属性
*/

class App extends Component {

  state = {
    msg: '<h1><b style="color: red">React</b>从入门到入坑</h1>',
    list: ['榴莲', '草莓', '杨梅', '西瓜'],
    proList: [
      {
        name: '华为',
        list: [
          'P40',
          'P50',
          'P60'
        ]
      },{
        name: '小米',
        list: [
          'M13',
          'M12',
          'M11'
        ]
      },{
        name: '锤子',
        list: [
          'T1',
          'T2',
          'T3'
        ]
      }
    ]
  }


  render() {

    // 直接先在外部将内容渲染好然后在直接放在 ul 中即可
    const lis = this.state.list.map((item,index, arr) => {
      return (<li key={index}>{item}</li>)
    })



    return (
      <div>

        <ul>
          {lis}
        </ul>

        <ul>
          {this.state.list.map(item => {
            return (<li key={item}>{item}</li>)
          })}
        </ul>


        <ol>
          {this.state.proList.map(item => {
            return (<li key={item.name}>
              <h3>{item.name}</h3>

              <p>
                {item.list.map(item1 => {
                  return (<span key={item1}>{item1}</span>)
                })}
              </p>

            </li>)
          })}
        </ol>


          <div>{this.state.msg}</div>

      </div>
    );
  }
}

export default App;
